<template>
	<view class="container">
		
		<view class="options" >
		  <view class="m-b-20  p-l-30 p-r-30 flex-x-between" >
		    <view class="c-base">
		      <text class="text-bold m-r-14">{{cardInfo.card_name || '购物卡'}}</text>
		      <text class="font-24">实时查看购物记录</text>
		    </view>
		  </view>
		  <view class="fill-base radius-20 p-30">
		    <view class="c-5e font-26">购物卡余额(元)</view>
			<view class="text-bold c-ff2 font-48">{{cardInfo.balance || 0}}</view>
		  </view>
		</view>
		
		<view class="boxPanel">
			<view class="flex-y-center">
				<text class="lines"></text>
				<text class="font-30 text-bold">使用范围</text>
			</view>
			<view class="font-26 c-49" v-if="cardInfo.range">
				{{cardInfo.range}}
			</view>
		</view>
		
		<view class="boxPanel">
			<view class="flex-y-center">
				<text class="lines"></text>
				<text class="font-30 text-bold">使用说明</text>
			</view>
			<view class="font-26 c-49" v-if="cardInfo.explain">
				{{cardInfo.explain}}
			</view>
		</view>
		
		<view class="tabsStatus">
		  <view class="tabsitem" :class="current==index?'active':''" @click="changeTabs(index)" v-for="(item,index) in statuslist" :key="index">
		    <text>{{item}}</text>
		  </view>
		  <view class="font-26 date flex-y-center m-l-auto c-60" @click="show = true">
		    {{date?date:"选择日期"}}
		    <u-icon name="arrow-right" size="14" color="#606882"></u-icon>
		  </view>
		</view>
		<view class="record boxPanel" v-for="(item,index) in list" :key="index">
		  <view class="flex-x-between">
		    <view class="text-bold">{{ item.remark }}</view>
		    <view class="text-bold font-32" style="color:#00CF4F;" v-if="item.account_data > 0">+{{ item.account_data }}</view>
			<view class="text-bold font-32" style="color:#FF2B3F;" v-else>{{ item.account_data }}</view>
		  </view>
		  <view class="flex-x-between">
		    <view class="c-8d">{{ $util.timeStampTurnTime(item.create_time) }}</view>
		  </view>
		</view>

		<emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="list.length == 0"></emptyData>
		<u-datetime-picker :show="show" v-model="value" mode="year-month" @confirm="confirm" @cancel="cancelDate"> </u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				cardInfo: {
					balance: 0,
					explain: '',
					card_name: '',
					range: ''
				},
				date: '',
				page: 1,
				empty: {
				  width: 135,
				  height: 134,
				  text: '暂无数据',
				  icon: '/image/emptyAddress.png',
				  marginTop: 100
				},
				statuslist: [
					"全部",
					// "收入",
					// "支出"
				],
				current: 0,
				//时间
				show: false,
				value: Number(new Date()),
				date: '',

			}
		},
		onLoad() {
			this.getCardInfo()
			this.getCardRecord()
		},
		onReachBottom() {
		  this.page++
		  this.getCardRecord()
		},
		methods: {
			confirm(e) {
				this.date = uni.$u.date(e.value,'yyyy-mm');
				this.show = false;
				this.page = 1;
				this.getCardRecord()
			},
			cancelDate() {
				this.date = "";
				this.page = 1;
				this.show = false;
				this.getCardRecord()
			},
			getCardInfo() {
				this.$api.sendRequest({
					url: '/api/membershoppingcardaccount/info',
					data: {},
					success: (res) => {
						if(res.code == 0&&res.data) {
							this.cardInfo = res.data;
							uni.setNavigationBarTitle({
								title: res.data.card_name
							})
						}
					}
				})
			},
			getCardRecord() {
				this.$api.sendRequest({
					url: '/api/membershoppingcardaccount/page',
					data: {
						page: this.page,
						date: this.date
					},
					success: (res) => {
						if(res.code == 0) {
							if(this.page == 1) this.list = []
			         		this.list = [...this.list, ...res.data.list]
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container { 
	padding-top: 24rpx;
}
.options {
  border-radius: 20rpx;
  margin: 0 24rpx 30rpx;
  padding: 20rpx 0 0;
  background: linear-gradient(274deg, #E33802 -0.4%, #FF916F 98.22%);
  
}
.lines {
	display: inline-block;
	width: 8rpx;
	height: 28rpx;
	border-radius: 0 20rpx 20rpx 0;
	background: $color-title2;
	margin-right: 20rpx;
}

.tabsStatus {
  position: relative;
  display: flex;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 20rpx;
  height: 60rpx;
  .tabsitem {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #788096;
    margin-right: 24rpx;
    background: #fff;
    border-radius: 40rpx;
    padding: 2rpx 30rpx;
    height: 52rpx;
  }
  .active {
    background-color: $color-title2!important;
    color: #fff!important;
  }
}

.date {
  background-color: #fff;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #696E80;
}
</style>
